<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计分析 - KSA评估系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.6.0/echarts.common.js"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <!-- 顶部导航 -->
        <nav class="bg-white shadow-lg rounded-lg mb-8">
            <div class="max-w-7xl mx-auto px-4">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <a href="../index.html" class="text-gray-600 hover:text-gray-800">
                            <i class="fas fa-arrow-left mr-2"></i>返回首页
                        </a>
                    </div>
                    <div class="flex items-center">
                        <h1 class="text-2xl font-bold text-gray-800">统计分析</h1>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 统计分析内容 -->
        <div class="space-y-6">
            <!-- 筛选条件 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <div class="flex flex-col space-y-4">
                    <!-- 视图选择 -->
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center">
                            <input type="radio" name="view" id="all" checked class="mr-2">
                            <label for="all" class="text-gray-700">所有人</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" name="view" id="personal" class="mr-2">
                            <label for="personal" class="text-gray-700">个人</label>
                        </div>
                        <div class="flex items-center">
                            <input type="radio" name="view" id="other" class="mr-2">
                            <label for="other" class="text-gray-700">他评</label>
                        </div>
                    </div>

                    <!-- 他评筛选条件 -->
                    <div id="otherFilters" class="hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div class="flex flex-col">
                            <label class="text-sm text-gray-600 mb-1">账期</label>
                            <input type="month" class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="flex flex-col">
                            <label class="text-sm text-gray-600 mb-1">被评分员工工号</label>
                            <input type="text" class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="flex flex-col">
                            <label class="text-sm text-gray-600 mb-1">被评分员工名字</label>
                            <input type="text" class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="flex flex-col">
                            <label class="text-sm text-gray-600 mb-1">评分员工工号</label>
                            <input type="text" class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="flex flex-col">
                            <label class="text-sm text-gray-600 mb-1">评分员工名字</label>
                            <input type="text" class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="flex flex-col">
                            <label class="text-sm text-gray-600 mb-1">KSA维度</label>
                            <select class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">全部</option>
                                <option value="K">知识</option>
                                <option value="S">技能</option>
                                <option value="A">能力</option>
                            </select>
                        </div>
                    </div>

                    <!-- 通用筛选条件 -->
                    <div id="commonFilters" class="flex space-x-4">
                        <select class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option>全部部门</option>
                            <option>研发设计部门</option>
                            <option>研发支持部门</option>
                            <option>运营支持部门</option>
                        </select>
                        <select class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option>全部岗位</option>
                            <option>电子电器工程师</option>
                            <option>车身设计师</option>
                            <option>底盘工程师</option>
                        </select>
                        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                            查询
                        </button>
                    </div>
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-medium text-gray-700 mb-2">平均KSA得分</h3>
                    <p class="text-3xl font-bold text-blue-600">85.5</p>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">知识</span>
                            <span class="font-medium">88.2</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">技能</span>
                            <span class="font-medium">82.5</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">能力</span>
                            <span class="font-medium">85.8</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-medium text-gray-700 mb-2">完成率</h3>
                    <p class="text-3xl font-bold text-green-600">78%</p>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">已完成</span>
                            <span class="font-medium">156</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">进行中</span>
                            <span class="font-medium">45</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">未开始</span>
                            <span class="font-medium">55</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-medium text-gray-700 mb-2">学习进度</h3>
                    <p class="text-3xl font-bold text-yellow-600">65%</p>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">线上学习</span>
                            <span class="font-medium">120</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">线下学习</span>
                            <span class="font-medium">85</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">混合学习</span>
                            <span class="font-medium">51</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-medium text-gray-700 mb-2">评估分布</h3>
                    <p class="text-3xl font-bold text-purple-600">256</p>
                    <div class="mt-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">优秀</span>
                            <span class="font-medium">45</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">良好</span>
                            <span class="font-medium">120</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">待提升</span>
                            <span class="font-medium">91</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-medium text-gray-700 mb-4">个人KSA能力分布</h3>
                    <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                        <div id="personalRadarChart" style="width: 100%; height: 100%;"></div>
                    </div>
                    <div class="mt-4 text-sm text-gray-500">
                        <p>说明：此雷达图展示了个人在知识、技能、能力三个维度的得分分布</p>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-medium text-gray-700 mb-4">部门KSA能力对比</h3>
                    <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                        <div id="departmentRadarChart" style="width: 100%; height: 100%;"></div>
                    </div>
                    <div class="mt-4 text-sm text-gray-500">
                        <p>说明：此雷达图展示了不同部门在KSA三个维度的能力对比</p>
                    </div>
                </div>
            </div>

            <!-- 详细数据表格 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h3 class="text-lg font-medium text-gray-700 mb-4">详细数据</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">员工</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">KSA得分</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">完成率</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">张三</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    研发设计部门
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-24 bg-gray-200 rounded-full h-2.5">
                                            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div>
                                        </div>
                                        <span class="ml-2 text-sm text-gray-500">85</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="w-24 bg-gray-200 rounded-full h-2.5">
                                            <div class="bg-green-600 h-2.5 rounded-full" style="width: 90%"></div>
                                        </div>
                                        <span class="ml-2 text-sm text-gray-500">90%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                        已完成
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 视图切换处理
        document.querySelectorAll('input[name="view"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const otherFilters = document.getElementById('otherFilters');
                const commonFilters = document.getElementById('commonFilters');
                
                if (this.id === 'other') {
                    otherFilters.classList.remove('hidden');
                    commonFilters.classList.add('hidden');
                } else {
                    otherFilters.classList.add('hidden');
                    commonFilters.classList.remove('hidden');
                }
            });
        });

        // 个人KSA能力雷达图
        const personalChart = echarts.init(document.getElementById('personalRadarChart'));
        const personalOption = {
            radar: {
                indicator: [
                    { name: '知识', max: 100 },
                    { name: '技能', max: 100 },
                    { name: '能力', max: 100 }
                ],
                radius: '65%',
                splitNumber: 4,
                axisName: {
                    color: '#666',
                    fontSize: 12
                },
                splitLine: {
                    lineStyle: {
                        color: ['#ddd']
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
                    }
                }
            },
            series: [{
                type: 'radar',
                data: [{
                    value: [85, 75, 90],
                    name: '张三',
                    areaStyle: {
                        color: 'rgba(54, 162, 235, 0.2)'
                    },
                    lineStyle: {
                        color: 'rgba(54, 162, 235, 1)',
                        width: 2
                    },
                    itemStyle: {
                        color: 'rgba(54, 162, 235, 1)'
                    }
                }]
            }]
        };
        personalChart.setOption(personalOption);

        // 部门KSA能力雷达图
        const departmentChart = echarts.init(document.getElementById('departmentRadarChart'));
        const departmentOption = {
            radar: {
                indicator: [
                    { name: '知识', max: 100 },
                    { name: '技能', max: 100 },
                    { name: '能力', max: 100 }
                ],
                radius: '65%',
                splitNumber: 4,
                axisName: {
                    color: '#666',
                    fontSize: 12
                },
                splitLine: {
                    lineStyle: {
                        color: ['#ddd']
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
                    }
                }
            },
            legend: {
                data: ['研发设计部门', '研发支持部门'],
                bottom: 0
            },
            series: [{
                type: 'radar',
                data: [
                    {
                        value: [85, 75, 90],
                        name: '研发设计部门',
                        areaStyle: {
                            color: 'rgba(255, 99, 132, 0.2)'
                        },
                        lineStyle: {
                            color: 'rgba(255, 99, 132, 1)',
                            width: 2
                        },
                        itemStyle: {
                            color: 'rgba(255, 99, 132, 1)'
                        }
                    },
                    {
                        value: [70, 85, 80],
                        name: '研发支持部门',
                        areaStyle: {
                            color: 'rgba(75, 192, 192, 0.2)'
                        },
                        lineStyle: {
                            color: 'rgba(75, 192, 192, 1)',
                            width: 2
                        },
                        itemStyle: {
                            color: 'rgba(75, 192, 192, 1)'
                        }
                    }
                ]
            }]
        };
        departmentChart.setOption(departmentOption);

        // 响应式调整
        window.addEventListener('resize', function() {
            personalChart.resize();
            departmentChart.resize();
        });
    </script>
</body>
</html> 